// 自定义箭头
<template>
  <el-button @click="graphAddEdge" type="primary" style="margin: 10px">创建边</el-button>
  <div id="container"></div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { Graph, DataUri, Shape } from "@antv/x6";
import { onMounted, ref } from "vue";

let graph = null;

const rect = new Shape.Rect({
  id: "customNode1",
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  label: "rect",
  zIndex: 2,
});
const circle = new Shape.Circle({
  id: "customNode3",
  x: 280,
  y: 200,
  width: 60,
  height: 60,
  label: "circle",
  zIndex: 2,
});

const graphAddEdge = () => {
  ElMessage({
    message: "创建边",
    type: "success",
  });

  const edge = new Shape.Edge();

  edge.setSource(rect).setTarget(circle);

  edge.attr({
    line: {
      sourceMarker: {
        tagName: "path",
        d: "M 20 -10 0 0 20 10 Z",
      },
      targetMarker: {
        tagName: "path",
        fill: "yellow", // 使用自定义填充色
        stroke: "green", // 使用自定义边框色
        strokeWidth: 2,
        d: "M 20 -10 0 0 20 10 Z",
      },
    },
  });
  graph.addEdge(edge);
};

const renderGraph = () => {
  graph = new Graph({
    container: document.getElementById("container"),
    width: 800,
    height: 600,
    panning: true,
    mousewheel: true,
    // 设置画布背景颜色
    background: {
      color: "#F2F7FA",
    },
  });

  //创建流程图数据
  const data = {
    //节点数据
    nodes: [],
  };

  graph.fromJSON(data); // 渲染元素
  graph.centerContent(); // 居中显示

  graph.addNode(rect);
  graph.addNode(circle);
};

onMounted(() => {
  renderGraph();
});
</script>
